/**
 * WidgetEventSearchNearby 附近搜索
 */

 import React,{Component} from "react";
 import { connect } from 'dva';
 import classnames from 'classnames';
 import { bindActionCreators } from 'redux';
 import widgetsActions from '../../../actions/Editor/widgets';
 import editorActions from '../../../actions/Editor/editor';
 import storage from "../../../utils/storage";
 import differUpdateHelper from "../../../utils/DifferUpdateHelper";
 class WidgetEventSearchNearby extends Component{
    constructor(props) {
        super(props);
        this.state = {             
            search: ""
        };
    }
    componentWillMount(){
        this.iframe = this.getIframe();
        this.iframe.on('load', function (){
            // IP定位
            this.iframe[0].contentWindow.setCurrentCity(function (result){
                this.locateCallback(result);
                if (this.search){
                    this.placeSearch(this.cityCode, this.search);
                }
            }.bind(this));
            // 附近搜索
            this.placeSearch = this.iframe[0].contentWindow.placeSearch;
            this.toggleResultPanel = this.iframe[0].contentWindow.toggleResultPanel;

            this.bindEvent();
        }.bind(this));

        // 城市编码
        this.cityCode = "";

        var widget = this.props.widget;
        this.search = widget.action.search_nearby || "";

        this.setState({
            search: this.search
        });
    }
    componentDidMount(){
        this.iframe.appendTo($(this.refs.gmappicker));
    }
    locateCallback(result){
        this.cityCode = result.adcode;
    }
    bindEvent(){
        let me = this;
        let className = "map-larger";
        $(this.refs.gmappicker).bind("mouseenter", function (){
            $(this).addClass(className);
            me.toggleResultPanel(true);
        }).bind("mouseleave", function (){
            $(this).removeClass(className);
            me.toggleResultPanel(false);
        });
    }
    getIframe(){
        // tip=0表示不显示地图右键定位提示
        return $("<iframe>").attr({
            src: storage.data.CONST.urls.gmap + "?tip=0",
            width: "100%",
            height: "100%",
            frameborder: 0,
            allowtransparency: 1
        });
    }
    handleOnSearch(){
        let search = this.state.search;
        if (!search){
            alert("请输入搜索关键词！");
            return;
        }
        this.placeSearch(this.cityCode, search);
        let widget = this.rebuildWidget(search);

        const {updateWidget,setState} = this.props;
        setState({selectedWidget: widget});
        updateWidget(widget);
    }
    handleOnChangeSearch(e){
        let keyword = $(e.target).val();
        this.setState({
            search: keyword
        });

        let widget = this.rebuildWidget(keyword);
        const {updateWidget,setState} = this.props;
        
        setState({selectedWidegt: widget});
        updateWidget(widget);
        differUpdateHelper.batch(widget);
    }
    rebuildWidget(search){
        const {widget} = this.props;
        let data = widget;
        data.action = $.extend(data.action, { search_nearby: search, city_code: this.cityCode });

        return data;
    }
    render(){
        return (
            <div className="form-group">
                <div className="rowli">
                    <input name="search" type="text" className="search-input target form-control" onChange={(e) => this.handleOnChangeSearch(e)} value={this.state.search} placeholder="输入附近搜索关键字" />
                    <div onClick={() => this.handleOnSearch()} type="submit" className="search-btn">
                        <span>搜索</span>
                    </div>
                    <div className="search-tip">将在地图中显示用户位置附近的关键字信息</div>
                    <div ref="gmappicker" className="gmap-gmappicker">
                    </div>
                </div>
            </div>
        )
    }
 }

 const mapStateToProps = ({ editor, widgets ,pages}) => {
  const pageId = editor.selectedPageId;
  return {
      widget: editor.selectedWidget,
      widgets: widgets.filter(w => w.page_id === pageId),
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({...widgetsActions,...editorActions}, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(WidgetEventSearchNearby);
